<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">收货地址</block>
		</cu-custom>
		<view v-for="(item,index) in list" :key="index" class="white-box">
			<view class="name-phone white-padding" @tap="selectAddress(item)">
				<view class="name"><text class="cu-tag" v-if="item.is_default==1">默认</text>{{item.realname}}</view>
				<view class="phone">{{item.mobile}}</view>
			</view>
			<view class="address white-padding" @tap="selectAddress(item)">{{item.address_name}} {{item.address_details}}</view>
			<view class="operation ">
				<view class="choose" @tap="selectAddress(item)">
					<!-- #ifndef MP-ALIPAY -->
					<radio :data-id="item.id" color="#FBB240" :checked="selected_id==item.id?true:false"></radio>
					<!-- #endif -->
					<text :data-id="item.id">选择</text>
				</view>
				<image :src="CLOUDPATH + '/icon-alter.png'" @tap="editAddress(item)"></image>
				<text class="otext" @tap="editAddress(item)">编辑</text>

				<image :src="CLOUDPATH + '/icon-delete.png'" @tap="deleteAddress" :data-id="item.id"></image>
				<text class="otext" @tap="deleteAddress" :data-id="item.id">移除</text>
			</view>
		</view>
		<view class="" style="height: 200rpx; width: 100%;"></view>
		<view class="cu-bar foot padding">
			<view class="cu-btn round lg w100" :class="['bg-'+theme]" @tap="addAddress">添加地址</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				page: 1,
				list: [],
				hasMore: true,
				loading: false,
				radio: "D",
				address_id: 0,
				selected_id: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
			}
		},
		onLoad(options) {
			this.address_id = options.address_id
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				let list = this.$common.getCache('address_list')
				if (!list) {
					this.$nextTick((res) => {
						uni.startPullDownRefresh({
							success() {
								console.log('success')
							},
							fail() {
								console.log('fail')
							}
						})
					})
				} else this.list = list
			}
		},
		methods: {
			getList() {
				if (!this.loading && this.hasMore) {
					this.$http
						.get('address', {
							page: this.page
						})
						.then((response) => {
							let list = response.data.data
							// for (let i in list) {
							// 	if (list[i].is_default == '1' && !_this.selected_id) {
							// 		_this.selected_id = list[i].id
							// 		uni.setStorageSync('address_id', list[i].id)
							// 		break
							// 	}
							// }

							this.$common.setCache('address_list', list, 60 * 60)
							this.list = list
							this.page++
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				} else
					uni.stopPullDownRefresh()
			},
			deleteAddress(e) {
				let _this = this
				let id = e.currentTarget.dataset.id
				let list = _this.list
				uni.showModal({
					title: '温馨提示',
					content: '是否确定要删除该地址',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							_this.$http
								.delete('address', {}, id)
								.then((response) => {
									console.log(response)
									_this.$common.showSuccess('删除成功')
									_this.$common.rmCache('address_default')
									if (id == _this.selected_id) {
										_this.selected_id = null
										uni.setStorageSync('address_id', null)
									}
									_this.$nextTick((r) => {
										uni.startPullDownRefresh()
									})
								})
								.catch((response) => {
									console.log(response)
								})
						}
					}
				})
			},
			selectAddress(address) {
				console.log(address)
				this.$common.setCache('address_select', address)
				uni.navigateBack({})
			},
			addAddress() {
				uni.navigateTo({
					url: "/pages/member/address/edit"
				})
			},
			editAddress(item) {
				this.$common.setCache('address_edit', item, 5 * 60)
				uni.navigateTo({
					url: "/pages/member/address/edit?id=" + item.id
				})
			},
		},
		onPullDownRefresh() {
			this.page = 1
			this.hasMore = true
			this.loading = false
			this.getList()
		},
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 20rpx 0;
		border-radius: 5rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.white-box .white-padding {
		width: 606rpx;
	}

	.white-box .name-phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 55rpx;
	}

	.name-phone .name {
		font-size: 32rpx;
	}

	.name-phone .phone {
		font-size: 28rpx;
	}

	.white-box .address {
		font-size: 24rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		margin-top: 20rpx;
	}

	.white-box .operation {
		border-top: 1rpx solid #EEEEEE;
		margin-top: 40rpx;
		padding: 20rpx 36rpx 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
	}

	.operation .choose {
		flex: 1;
		line-height: 52rpx;
	}

	.choose radio {
		margin-right: 33rpx;
	}

	.operation image {
		width: 30rpx;
		height: 30rpx;
		margin: 0 15rpx 0 50rpx;
	}

	button {
		width: 618rpx;
		margin: 258rpx 66rpx 50rpx;
	}
</style>
